<template>
  <div class="header">
    <h1>在线商城后台管理系统</h1>
    <aside class="headerS">
        <img :src="`http://localhost:9191${user.avatarUrl}`" alt="">
        <p>{{user.username}}</p>
         <button @click="tuichu()">退出登录</button>   
        
    </aside>
  </div>
</template>

<script setup>
import router from "@/router";
    
    let user = JSON.parse(sessionStorage.getItem('user'));
    console.log(user);
    
    let touxiang = user.avatarUrl;
    console.log(touxiang);

    const tuichu =()=>{
        sessionStorage.clear();
        router.push('/admin');
    }
</script>

<style scoped>
.header{
    width: 100%;
    height: 13%;
    background-color: #2a2a33;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header h1{
    color: yellow;
    font-size: 1.8rem;
    padding-left: 1.8rem;
}
.header .headerS{
    display: flex;
    align-items: center;
    padding-right: 1.8rem;
}
.header aside img{
    width: 2rem;
    border-radius: 100%;
}
.header .headerS p{
    margin-left: 0.8rem;
    font-size: 1.2rem;
    color: white;
}
.header .headerS .i2{
    width: 20px;
}
.el-menu-item{
    background-color: #2a2a33;
}
.header .headerS button{
    background-color: #2a2a33;
    color: skyblue;
    border: none;
    text-decoration: underline;
    font-size: 0.8rem;
    margin-left: 1.5rem;
}

</style>